<template>
	<view class="search">
		<view class="screen">
			<view class="tab">
				<view class="tab-item" :class="tab==1 ? 'select' : ''" @click="tabClick(1)">
					<text>综合</text>
				</view>
				<view class="tab-item" :class="tab==2 ? 'select' : ''" @click="tabClick(2,sort)">
					<text>价格</text>
					<image v-if="sort_price==1" :src="$img_path('/course/sort_1.png')" mode="widthFix"></image>
					<image v-if="sort_price==2" :src="$img_path('/course/sort_2.png')" mode="widthFix"></image>
				</view>
				<view class="tab-item" :class="tab==3 ? 'select' : ''" @click="tabClick(3,sort)">
					<text>销量</text>
					<image v-if="sort_num==1" :src="$img_path('/course/sort_1.png')" mode="widthFix"></image>
					<image v-if="sort_num==2" :src="$img_path('/course/sort_2.png')" mode="widthFix"></image>
				</view>
				<view class="tab-item box-style" @click="tabClick(4,box_style)">
					<image v-if="box_style==1" :src="$img_path('/course/s_i_1.png')" mode="widthFix"></image>
					<image v-if="box_style==2" :src="$img_path('/course/s_i_2.png')" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="p-list">
			<!-- <goodsBox class="item" 
				v-for="(item,i) in 5" 
				:key="i" :style="{width: box_style==1 ? 'calc(50% - 7rpx)' : '100%'}" 
				:imageStyle="box_style==2 ? {width:'232rpx',height:'232rpx'} : null" 
				:styleType="box_style">
				<text slot="center">100人已报名</text>
			</goodsBox> -->
			<view class="item" style="margin-top: 20rpx;" v-for="(item,i) in 5" :key="i" :style="{width: box_style==1 ? 'calc(50% - 7rpx)' : '100%'}">
				<home-goods-box 
					:type="box_style == 1 ? 'row' : 'col'" 
					:imageStyle="{width:'344rpx',height:'246rpx'}"
				></home-goods-box>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSearch from '@/components/header-search/header-search.vue'
	import goodsBox from '../../components/service-box/goods-box.vue';
	export default {
		components: {
			headerSearch,
			goodsBox
		},
		data() {
			return {
				navTitle:'',
				pageType:null,
				isSou: false,
				r_list: [],
				name: '',
				sort_price: 1,
				sort_num: 1,
				tab:1,
				box_style:1,
				goodsList: [],
				searchValue: ''
			};
		},
		onLoad(data) {
			console.log(data)
			this.navTitle = data.title
			this.pageType = data.type
			if(data.content){
				this.searchValue = data.content || ''
			}
			if(data.classify){
				
			}
		},
		mounted() {
			if (this.$refs.search) {
				this.$refs.search.inputValue = this.searchValue
			}
		},
		onShow() {
			this.getRlist()
		},
		methods: {

			getRlist() {
				if (uni.getStorageSync('r_list_mall')) {
					this.r_list = JSON.parse(uni.getStorageSync('r_list_mall'))
				} else {
					this.r_list = []
				}
			},
			getGoods() {
				// this.$http.product_list({
				// 	name:this.name,
				// 	sort:this.sort
				// }).then(res=>{
				// 	this.goodsList = res.data
				// })
			},
			searchBlur(val) {
				this.searchValue = val.detail.value
			},
			tabClick(type,val){
				switch (type){
					case 1:
						break;
					case 2:
						if(this.tab==type){
							if(this.sort_price == 1){
								this.sort_price = 2
							}else{
								this.sort_price = 1
							}
						}
						break;
					case 3:
						if(this.tab==type){
							if(this.sort_num == 1){
								this.sort_num = 2
							}else{
								this.sort_num = 1
							}
						}
						break;
					default:
						if(this.box_style==1){
							this.box_style = 2
						}else{
							this.box_style = 1
						}
						break;
				}
				if(type!=4){
					this.tab = type
				}
			},

			search() {

				if (this.searchValue && this.r_list.filter((e) => {
						return e.text == this.searchValue
					}).length < 1) {
					this.r_list.push({
						text: this.searchValue
					})
					uni.setStorageSync('r_list_mall', JSON.stringify(this.r_list))
				}

				this.getGoods()
			},
			close() {
				this.name = ''
				// this.getGoods()
				// this.getRlist()
			},
			r_click(text) {
				this.name = text
				// this.getGoods()
			},
			delRlist() {
				uni.showModal({
					content: '确定删除历史记录？',
					success: (res) => {
						if (res.confirm) {
							uni.removeStorageSync('r_list_mall')
							this.getRlist()
						}
					}
				})

			}
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.search {
		box-sizing: border-box;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			z-index: 9;
			padding: 20rpx 30rpx 0;
			// background-color: #FFFFFF;

			.btn {
				width: 86rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #FD845C;
				text-align: right;
			}
		}

		.history {
			margin-top: 40rpx;
			padding: 0 30rpx;

			.title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				image {
					width: 40rpx;
					height: 42rpx;
				}
			}

			.h-list {
				width: calc(100% + 15rpx);
				display: flex;
				flex-wrap: wrap;

				.item {
					min-width: 136rpx;
					height: 64rpx;
					margin-right: 17rpx;
					background-color: #F5F5F5;
					border-radius: 30rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 64rpx;
					text-align: center;
					font-style: normal;
					text-transform: none;
					padding: 0 20rpx;
					box-sizing: border-box;
					margin-top: 40rpx;
				}
			}
		}

		.s-drow {
			position: relative;
		}

		.screen {
			padding: 30rpx 30rpx 0;

			.tab {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 16rpx 24rpx 14rpx;
				// background-color: #FFFFFF;
				border-radius: 10rpx;
				// margin-bottom: 32rpx;
				.tab-item {
					display: flex;
					justify-content: center;
					align-items: center;
					text {
						font-weight: bold;
						font-size: 32rpx;
						color: #999999;
						line-height: 44rpx;
					}
					&.select {
						text {
							color: #E72A2A;
						}
					}

					image {
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}

		.p-list {
			padding: 24rpx 22rpx 64rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
	}
</style>